<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- Import style -->
    <link rel="stylesheet" href="./static/element-plus/index.css" />
    <!-- Import Vue 3 -->
    <script src="./static/js/vue.global.js"></script>
    <!-- Import component library -->
    <script src="./static/element-plus/index.full.js"></script>
    <script src="./static/element-plus/theme-chalk/display.css"></script>
  </head>
  <body>
    <div id="app">
      <el-container>
        <el-header>
        <el-row>
           <el-col :span="4" style="display: flex; flex-direction: row;align-items: center;"> 
            <img src="./static/images/logo.png" style="height: 60px;"/>
            <h2 style="padding-left: 6px;">技术社区</h2>
           </el-col>
           <el-col :span="8">
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              style="border-bottom: none !important;"
            >
              <el-menu-item index="1">首页</el-menu-item>
              <el-menu-item index="2">文章</el-menu-item>
              <el-menu-item index="3">课程</el-menu-item>
              <el-menu-item index="4">商城</el-menu-item>
            </el-menu>
           </el-col>
           <el-col :span="8" style="height: 60px;line-height: 60px;" class="hidden-xs-only">
            <el-input />
           </el-col>
        </el-row>
        </el-header>
      <el-container>
      <el-aside>
        <el-card>
        <el-menu default-active="activeIndex">
            <el-menu-item index="1">个人中心</el-menu-item>
            <el-menu-item index="2">我的文章</el-menu-item>
            <el-menu-item index="3">我的课程</el-menu-item>
            <el-menu-item index="4">我的订单</el-menu-item>
            <el-menu-item index="5">我的收藏</el-menu-item>
        </el-menu>
       </el-card> 
      </el-aside>
        <el-main>
          <el-card>
            <el-row>
                <el-col :span="4">
                    <img src="./static/images/avatar.png" style="width: 100px; height: 100px; border-radius: 50%;"/>
                </el-col>
                <el-col :span="20">
                    <h2>{{user.username}}</h2>
                    <p>性别:{{user.gender}}</p>
                    <p>签名档:{{user.sign}}</p>
                </el-col>
            </el-row>
          </el-card>
          <el-card>
            <el-tabs>
                <el-tab-pane label="我发布的文章">
                    <div v-if="myArticleList.length > 0">
                        <el-list v-for="article in myArticleList" :key="article.id">
                          <el-list-item>
                            <p><el-link :href="article.url">{{ article.title }}</el-link></p>
                          </el-list-item>
                        </el-list>
                      </div>
                    <el-empty v-else description="暂无数据"/>
                </el-tab-pane>
                <el-tab-pane label="我收藏的文章">
                    <div v-if="myArticleList.length > 0">
                        <el-list v-for="article in myArticleList" :key="article.id">
                          <el-list-item>
                            <p><el-link :href="article.url">{{ article.title }}</el-link></p>
                          </el-list-item>
                        </el-list>
                      </div>
                    <el-empty v-else description="暂无数据"/>
                </el-tab-pane>
                <el-tab-pane label="我发布的课程">
                    <div v-if="myCourseList.length > 0">
                        <el-list v-for="course in myCourseList" :key="course.id">
                          <el-list-item>
                            <p><el-link :href="course.url">{{ course.title }}</el-link></p>
                          </el-list-item>
                        </el-list>
                      </div>
                    <el-empty v-else description="暂无数据"/>
                </el-tab-pane>
                <el-tab-pane label="我收藏的课程">
                    <div v-if="myCourseList.length > 0">
                        <el-list v-for="course in myCourseList" :key="course.id">
                          <el-list-item>
                           <p><el-link :href="course.url">{{ course.title }}</el-link></p>
                          </el-list-item>
                        </el-list>
                      </div>
                    <el-empty v-else description="暂无数据"/>
                </el-tab-pane>
                <el-tab-pane label="我收藏的商品">
                    <div v-if="myProductList.length > 0">
                        <el-list v-for="product in myProductList" :key="product.id">
                          <el-list-item>
                            <p><el-link :href="product.url">{{ product.title }}</el-link></p>
                          </el-list-item>
                        </el-list>
                      </div>
                    <el-empty v-else description="暂无数据"/>
                </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-main>
      </el-container>
        <el-footer>
          <el-row>
            <el-col :xs="24" :lg="8" style="display: flex; flex-direction: row; align-items: center">
              <div>
                <img src="./static/images/logo.png" style="height: 100px" />
              </div>
              <div>
                <h2 style="padding-left: 4px">技术社区</h2>
                <p style="padding-left: 4px">致力构建一个专业的IT技术交流社区</p>
              </div>
            </el-col>
            <el-col :xs="24" :lg="10" style="padding-top: 30px;">
              <div>
                <el-link type="primary" style="padding-left: 50px">首页</el-link>
                <el-link type="primary" style="padding-left: 70px">咨询</el-link>
                <el-link type="primary" style="padding-left: 80px">课程</el-link>
                <el-link type="primary" style="padding-left: 80px">商城</el-link>
              </div>
              <div>
                <el-link type="primary" style="padding-left: 30px">关于我们</el-link>
                <el-link type="primary" style="padding-left: 50px">使用手册</el-link>
                <el-link type="primary" style="padding-left: 50px">隐私条款</el-link>
                <el-link type="primary" style="padding-left: 50px">建议反馈</el-link>
              </div>
            </el-col>
            <el-col :xs="24" :lg="6">
              <div>
                <h2>联系我们</h2>
                <p>电话：123456789</p>
                <p>邮箱：software@develop.com</p>
              </div>
            </el-col>
            <el-col :xs="24" :lg="24" style="background-color: deepskyblue;">
                <p style="text-align: center;">软件开发工作室版权所有</p>
            </el-col>
          </el-row>
        </el-footer>
      </el-container>
    </div>
  </body>
  <script>
    var App = {
      data() {
        return {
            user:{
          username: "admin",
          gender: "男",
          job:"前端开发工程师",
          sign:"man!",
        },
          activeIndex: "1",
          myArticleList: [
        { id: 1, title: "vue3.0新特性使用攻略", url: "article1.html" },
        { id: 2, title: "vue脚手架使用详解", url: "article2.html" },
        { id: 3, title: "Element Plus组件库使用指南", url: "article3.html" },
      ],
      articleList: [{}],
      myCourseList: [
        { id: 1, title: "零基础学JavaScript", url: "course1.html" },
        { id: 2, title: "Vue3.0从入门到精通", url: "course2.html" },
        { id: 3, title: "Element Plus组件库实战", url: "course3.html" },
      ],
      courseList: [],
      myProductList: [],
    };
      },
    }
    Vue.createApp(App).use(ElementPlus).mount("#app");
  </script>
</html>
